<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="shortcut icon"  th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>
    <div style="margin: auto; width: 1100px">
        <form class="layui-form layui-form-pane" action="">
            <fieldset class="layui-elem-field" style="margin-top: 20px; padding: 20px">
            <legend>申请人</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelApplication.staff.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">工号</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelApplication.staff.jobNumber}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">申请日期</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${#dates.format(travelApplication.addTime,'yyyy-MM-dd')}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <input type="hidden" id="appstaffid" th:value="${travelApplication.staff.id}">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="openStaff('14')">查看详情</button>
            </div>
        </fieldset>
            <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px" th:each="travelPeople:${travelApplication.travelPeoples}" th:if="${travelPeople.staff.name ne null} ">
            <legend>随行人</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.staff.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">工号</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.staff.jobNumber}" autocomplete="off" class="layui-input">
                    </div>
                </div>
               <!-- <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">查看详情</button>-->
            </div>
        </fieldset>
            <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px">
            <legend>出差计划</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">出发日期</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${#dates.format(travelApplication.planTravelDate,'yyyy-MM-dd')}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">计划天数</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelApplication.planDays}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">计划金额</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelApplication.planMoney}" autocomplete="off" class="layui-input">
                    </div>
                </div><br><br>
                <div class="layui-form-item layui-form-text" style="padding-right: 20px">
                    <label class="layui-form-label">出差计划</label>
                    <div class="layui-input-block">
                        <textarea readonly="readonly" th:text="${travelApplication.purpose}" class="layui-textarea" style="resize: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text" style="padding-right: 20px">
                    <label class="layui-form-label">行程计划</label>
                    <div class="layui-input-block">
                        <textarea readonly="readonly" th:text="${travelApplication.planTravel}" class="layui-textarea" style="resize: none"></textarea>
                    </div>
                </div>
            </div>
        </fieldset>
            <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px">
            <legend>客户信息</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelApplication.supplier.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelApplication.supplier.address}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly"   autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">查看详情</button>-->
            </div>

        </fieldset>
            <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px">
            <legend>审批进度</legend>

            <br>
            <ul th:each="date ,dateState:${TravelApprovel}"  class="layui-timeline">

                <li th:if="${dateState.index==0&&date.getApprovalInfo()==null}" class="layui-timeline-item">
                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">部门经理审核:&emsp;[[${date.staff.name}]] &nbsp;在&nbsp; [[${#dates.format(date.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]&nbsp;[[${TravelApprovel[0].getApprovalInfo()}]] &nbsp;审批通过</div>
                </div>

            </li>

                <li th:if="${dateState.index==1&&date.getApprovalInfo()==null}" class="layui-timeline-item">
                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">运营审核:&emsp;[[${date.staff.name}]]&nbsp; 在&nbsp; [[${#dates.format(date.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]&nbsp;[[${TravelApprovel[1].getApprovalInfo()}]]&nbsp;审批通过</div>
                    </div>
                </li>
                <li th:if="${dateState.index==2&&date.getApprovalInfo()==null}" class="layui-timeline-item">
                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">总经理审核: &emsp;[[${date.staff.name}]]&nbsp;在&nbsp;[[${#dates.format(date.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]&nbsp;[[${TravelApprovel[2].getApprovalInfo()}]]&nbsp;审批通过</div>
                    </div>
                </li>


                    <li th:if="${dateState.index==0&&date.getApprovalInfo()!=null}" class="layui-timeline-item">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">部门经理审核:&emsp;[[${date.staff.name}]] &nbsp;在&nbsp; [[${#dates.format(date.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]:&nbsp;[[${TravelApprovel[0].getApprovalInfo()}]] &nbsp;拒绝通过</div>
                        </div>
                    </li>

                    <li th:if="${dateState.index==1&&date.getApprovalInfo()!=null}" class="layui-timeline-item">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">运营审核:&emsp;[[${date.staff.name}]]&nbsp; 在&nbsp; [[${#dates.format(date.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]:&nbsp;[[${TravelApprovel[1].getApprovalInfo()}]]&nbsp;拒绝通过</div>
                        </div>
                    </li>
                    <li th:if="${dateState.index==2&&date.getApprovalInfo()!=null}" class="layui-timeline-item">
                        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">总经理审核: &emsp;[[${date.staff.name}]]&nbsp;在&nbsp;[[${#dates.format(date.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]:&nbsp;[[${TravelApprovel[2].getApprovalInfo()}]]&nbsp;拒绝通过</div>
                        </div>
                    </li>

            </ul>
        </fieldset>
            <fieldset th:if="${travelApplication.processNode.getNode() >= 6}" class="layui-elem-field" style="margin-top: 20px; padding-left: 20px">
            <legend>出差日志</legend>
            <br>
            <ul th:each="date ,dateState:${log}" class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop lsayui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">[[${#dates.format(date.time,'yyyy-MM-dd HH:mm:ss')}]]&emsp;&emsp;[[${date.content}]]</div>
                    </div>
                </li>

            </ul>
        </fieldset>
            <fieldset th:if="${travelApplication.processNode.getNode() >= 8}" class="layui-elem-field  site-demo-button" style="margin-top: 20px; padding-left: 20px">
            <legend>出差总结</legend>

            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <div class="layui-timeline-content layui-text" id="xiazaidiv">
                        <button type="button" onclick="test1()" class="layui-btn" id="select">查看文件</button>
                        <button type="button" class="layui-btn" id="xiazai" >下载文件</button>
                    </div>
                </li>

            </ul>
        </fieldset>
        </form>
    </div>
</body>
<script th:inline="javascript" type="text/javascript">
    function openStaff(url) {
        alert(url)
        // layui.use('layer', function(){
        //     var layer = layui.layer;
        //     parent.layer.open({
        //         title:'员工详情',
        //         type:2,
        //         content:url,
        //         area: ['1200px', '600px'],
        //
        //         shade: [0.3, '#393D49'],
        //         shadeClose:false,
        //         moveOut:true,
        //     })
        // });
    }
    $(function () {
        if([[${travelApplication.processNode.getNode()}]] >=8){
            $("#xiazaidiv").on("click","#xiazai",function () {
                    window.open("/approve/download?filenames="+[[${report.report}]])
            })
        }


    })

    function test1(){
        layui.use('layer', function(){
            var layer = layui.layer;

            layui.layer.open({
                title: '预览文件',
                type: 2,
                area: ['900px', '580px'],
                content: '/approve/previewFile?names='+[[${report.report}]]
            });
        });
    }

</script>
</html>